<template>
    <div :id="id" ref="chart" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resizes'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '100%'
        },
        height: {
            type: String,
            default: '400px'
        }
    },
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.initChart()
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs['chart'])

            const xAxisData = []
            const data = []
            const data2 = []
            for (let i = 0; i < 50; i++) {
                xAxisData.push(i)
                data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
                data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
            }
            this.chart.setOption({
                backgroundColor: '#08263a',
                grid: {
                    left: '5%',
                    right: '5%'
                },
                xAxis: [{
                    show: false,
                    data: xAxisData
                }, {
                    show: false,
                    data: xAxisData
                }],
                visualMap: {
                    show: false,
                    min: 0,
                    max: 50,
                    dimension: 0,
                    inRange: {
                        color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
                    }
                },
                yAxis: {
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#4a657a'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#08263f'
                        }
                    },
                    axisTick: {
                        show: false
                    }
                },
                series: [{
                    name: 'back',
                    type: 'bar',
                    data: data2,
                    z: 1,
                    itemStyle: {
                        opacity: 0.4,
                        barBorderRadius: 5,
                        shadowBlur: 3,
                        shadowColor: '#111'
                    }
                }, {
                    name: 'Simulate Shadow',
                    type: 'line',
                    data,
                    z: 2,
                    showSymbol: false,
                    animationDelay: 0,
                    animationEasing: 'linear',
                    animationDuration: 1200,
                    lineStyle: {
                        color: 'transparent'
                    },
                    areaStyle: {
                        color: '#08263a',
                        shadowBlur: 50,
                        shadowColor: '#000'
                    }
                }, {
                    name: 'front',
                    type: 'bar',
                    data,
                    xAxisIndex: 1,
                    z: 3,
                    itemStyle: {
                        barBorderRadius: 5
                    }
                }],
                animationEasing: 'elasticOut',
                animationEasingUpdate: 'elasticOut',
                animationDelay(idx) {
                    return idx * 20
                },
                animationDelayUpdate(idx) {
                    return idx * 20
                }
            })
        }
    }
}
</script>